<template>
	<view>
		<u-navbar v-if="!$isWeixin()" :title="title" :customBack="backToHome" :titleBold="true" :is-fixed="true">
			<template slot="right">
				<view class="u-p-r-40 u-flex"><u-image @click="showSearchPopup = true" src="@/static/images/search-active.png" :width="40" :height="40"></u-image></view>
			</template>
		</u-navbar>

		<view class="u-flex-col u-col-bottom u-p-t-20" v-if="$isWeixin()">
			<view class="u-p-r-40 u-flex"><u-image @click="showSearchPopup = true" src="@/static/images/search-active.png" :width="40" :height="40"></u-image></view>
		</view>

		<view class="review-list" :class="{ 'scroll-lock': showSearchPopup }">
			<view class="review-item" v-for="(item, index) in reviewList" :key="index">
				<text class="level">等级：{{ item.LevelName }}</text>
				<view class="title u-flex">
					<text class="dealer-name">一级经销商:</text>
					<text class="">{{ item.First_DealerName }}</text>
				</view>
				<view class="title u-flex" v-if="item.Level != 1">
					<text class="dealer-name">二级经销商:</text>
					<text class="">{{ item.Double_DealerName }}</text>
				</view>
				<view class="title u-flex" v-if="item.Level == 3">
					<text class="dealer-name">门店:</text>
					<text class="">{{ item.DoorName }}</text>
				</view>
				<view class="grid-list">
					<text>总监：{{ item.DirectorName }}</text>
					<text>销售经理：{{ item.SalseManagerName }}</text>
					<text>城市经理：{{ item.DealerTerminalName }}</text>
					<text>团队负责人：{{ item.TeamLeaderName }}</text>
					<text>申请人：{{ item.ApplayManagerName }}</text>
					<view>
						状态：
						<text style="font-weight: bold;" :style="{ color: item.FontColor }">{{ item.StateName }}</text>
					</view>
					<text class="u-font-22" style="grid-column-start: 2 span">申请时间：{{ (item.Created * 1000) | date('yyyy-mm-dd hh:MM:ss') }}</text>
				</view>
				<view class="btn-group">
					<u-button size="mini" @click="toDetailPage(item)">查看</u-button>
					<u-button v-if="item.IsAuditEnd != 1 && item.IsShowAuditBtn > 0" class="u-m-l-20" type="warning" size="mini" @click="toReviewPage(item)">审核</u-button>
				</view>
			</view>

			<u-loadmore :status="status" />
		</view>

		<u-popup :border-radius="24" width="600" v-model="showSearchPopup" mode="right">
			<view class="u-p-30"><search-form v-model="searchParams" :showApplyType="false" @change="onSearchChange" :splitDealerName="true" :metadata="metadata" @close="showSearchPopup = false"></search-form></view>
		</u-popup>

		<!-- <u-modal
			title="申请"
			:showLoading="false"
			:mask-close-able="true"
			v-model="showApplyModal"
			cancel-text="重置"
			:show-cancel-button="true"
			@confirm="toApplyPage"
			:async-close="true"
			confirm-text="确定"
		>
			<view class="u-p-30">
				<u-subsection active-color="#FF7A23" :list="applyTypeList" :current="applyTypeIndex" @change="(index) => applyTypeIndex = index"></u-subsection>
			</view>
			<apply-search ref="applySearch"></apply-search>
		</u-modal> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '信息审核',
			SelectType: 1,
			showSearchPopup: false,
			IsFirst: true,
			reviewPage: {
				Items: [],
				PageCount: 0,
				PageIndex: 0,
				PageSize: 10,
				TotalCount: 0
			},
			reviewList: [],
			status: 'loadmore',

			showApplyModal: false,
			applyTypeIndex: 0,
			applyTypeList: [{ name: '信息维护', value: 1 }, { name: '门店照片维护', value: 2 }],

			metadata: {
				DealerDivisionList: [],
				DealerTerminalList: [],
				DirectorList: [],
				RegionalDirectorList: [],
				SalesServiceList: [],
				SalseList: [],
				SeniorDealerTerminalList: [],
				TeamList: [],
				AuditStateBaseList: []
			},
			searchParams: {
				DirectorId: null,
				SalseId: null,
				DealerTerminalId: null,
				TeamId: null,
				SeniorDealerTerminalId: null,
				DealerDivisionId: null,
				SalesService: null,
				RegionalDirector: null,
				DealerName: '',
				StartTime: null,
				EndTime: null,
				Level: null,
				ApplayType: null,
				First_DealerName: '',
				Double_DealerName: '',
				DoorName: '',
			}
		};
	},

	onLoad(options) {
		console.log(options);
		if (options.SelectType == 2) {
			this.SelectType = options.SelectType;
			this.title = '门店照片审核';
		}

		if (this.$isWeixin()) {
			this.$setTitle(this.title);
		}
	},
	
	onShow() {
		this.getData(true);
	},

	// 触底事件
	onReachBottom() {
		if (this.reviewPage.PageIndex + 1 >= this.reviewPage.PageCount) return;
		this.status = 'loading';
		this.reviewPage.PageIndex = this.reviewPage.PageIndex + 1;
		this.getData();
	},

	methods: {
		backToHome() {
			uni.navigateBack()
		},
		
		toReviewPage(item) {
			this.$u.route({
				url: '/pages/review/information/review',
				params: {
					DealerId: item.Dealer,
					InfoId: item.InfoId
				}
			})
		},

		onSearchChange(e) {
			this.showSearchPopup = false;
			this.reviewPage.PageIndex = 0;
			this.$nextTick(() => {
				this.getData(true);
			});
		},
		toApplyPage(item) {
			const applyType = this.applyTypeList[this.applyTypeIndex];

			const applySearch = this.$refs.applySearch;

			let dealerId = null;

			if (applySearch.params.FirstDealerId) {
				dealerId = applySearch.params.FirstDealerId;
			}

			if (applySearch.params.DoubleDealerId) {
				dealerId = applySearch.params.DoubleDealerId;
			}

			if (applySearch.params.StoreDealerId) {
				dealerId = applySearch.params.StoreDealerId;
			}

			if (!dealerId) {
				this.$u.toast('请选择经销商或门店');
				return false;
			}

			if (applyType.value == 1) {
				this.$u.route({
					url: '/pages/apply/information/index',
					params: {
						DealerId: dealerId
					}
				});
			}
			if (applyType.value == 2) {
				this.$u.route({
					url: '/pages/apply/information/storePhoto',
					params: {
						DealerId: dealerId
					}
				});
			}
			this.showApplyModal = false;
		},

		toDetailPage(item) {
			if (this.SelectType == 1) {
				this.$u.route({
					url: '/pages/review/information/detail',
					params: {
						InfoId: item.InfoId,
						Level: item.Level
					}
				});
			}
			if (this.SelectType == 2) {
				this.$u.route({
					url: '/pages/review/information/storePhoto/detail',
					params: {
						InfoId: item.InfoId
					}
				});
			}
		},

		getData(reload) {
			this.$u.api
				.getInformationReviewList(
					Object.assign(
						{
							IsFirst: this.IsFirst,
							Level: this.Level,
							SelectType: this.SelectType,
							Pageindex: this.reviewPage.PageIndex,
							Pagesize: this.reviewPage.PageSize
						},
						this.searchParams
					)
				)
				.then(res => {
					const {
						ResultCode,
						ResultMessage,
						Info_List,
						DealerDivisionList,
						DealerTerminalList,
						DirectorList,
						RegionalDirectorList,
						SalesServiceList,
						SalseList,
						SeniorDealerTerminalList,
						TeamList,
						AuditStateBaseList
					} = res;
					if (ResultCode === 1) {
						if (this.IsFirst) {
							this.metadata.DealerDivisionList = DealerDivisionList;
							this.metadata.DealerTerminalList = DealerTerminalList;
							this.metadata.DirectorList = DirectorList;
							this.metadata.RegionalDirectorList = RegionalDirectorList;
							this.metadata.SalesServiceList = SalesServiceList;
							this.metadata.SalseList = SalseList;
							this.metadata.SeniorDealerTerminalList = SeniorDealerTerminalList;
							this.metadata.TeamList = TeamList;
							this.metadata.AuditStateBaseList = AuditStateBaseList;
							this.IsFirst = false;
						}

						if (Info_List) {
							this.reviewPage = Info_List;
							if (reload) {
								this.reviewList = Info_List.Items;
							} else {
								this.reviewList.push(...Info_List.Items);
							}

							if (this.reviewPage.PageIndex + 1 >= this.reviewPage.PageCount) {
								this.status = 'nomore';
							}
						} else {
							this.reviewList = [];
							this.status = 'nomore';
						}
					}
				});
		}
	}
};
</script>

<style>
page {
	background-color: #eaecef;
}
</style>
<style lang="scss" scoped>
.review-list {
	padding: 20rpx;
}

.review-item {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 12rpx;
	font-size: 22rpx;
	color: #2e2f32;
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;

	.dealer-name,
	.c_name {
		color: #ff7a23;
		font-weight: bold;
		// font-size: 28rpx;
	}

	.dealer-name {
		margin-right: 10rpx;
	}

	.title,
	.level {
		line-height: 40rpx;
	}

	.grid-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 40rpx);
		line-height: 40rpx;
	}

	.btn-group {
		text-align: right;
	}
}
</style>
